<template>
	<view>
		<u-navbar>
			<view class="slot-wrap">
				<input type="text"  class="input" :placeholder="placeholderValue" v-model="text" disabled @click="tosearch"/>
			</view>
		</u-navbar>
		<view class="shop_box">
			<view class="shop_item" v-for="(item,index) in productList" @click="navTo(item.id)">
				<image :src="item.image.file_path" mode=""></image>
				<view class="shop_detail">
					{{item.goods_name}}
				</view>
				<view class="shop_jifen">
					{{item.goods_price}}积分
				</view>
			</view>
			
		</view>
		<view v-if="productList.length==0" class="no">
			<image src="../../static/task.png" mode="aspectFill" ></image>
			<view>暂未搜索到此类商品</view>
		</view>
	</view>
</template>

<script>
	import {getGoodsList} from '../../api/product.js'
	export default {
		data() {
			return {
				text:null,
				placeholderValue:'输入关键字',
				id:null,
				page:1,
				productList:[]  //商品列表
				
			}
		},
		onLoad(e) {
			if(e.id){
				this.id=e.id
			}
			if(e.text){
				this.text=e.text
			}
			this.getProductList()
			
		},
		onShow() {
			
		},
		onReachBottom() {
			this.getProductList()
		},
		methods: {
			//获取商品列表
			getProductList(){
				let data={
					page:this.page,
				}
				if(this.id!=null){
					data.category_id=this.id
				}
				if(this.text!=null){
					data.search=this.text
				}
				this.post(getGoodsList,data).then(res=>{
					console.log(res)
					this.page++
					this.productList=[...this.productList,...res.data.data]
				})
			},
			// 跳转商品详情
			navTo(item){
				uni.navigateTo({
					url:"../product/product?id="+item
				})
			},
			tosearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no{
		width: 750rpx;
		height: 70vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		image{
			width: 400rpx;
			height: 300rpx;
		}
	}
	page{
		background: #F6F6F6;
	}
	.input{
		width: 646rpx;
		height: 58rpx;
		border: 1px solid #B2B2B2;
		opacity: 1;
		border-radius: 58rpx;
		font-size: 26rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
	}
	.shop_box{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		.shop_item{
			width: 340rpx;
			height: 480rpx;
			margin-top: 10rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			image{
				width: 340rpx;
				height: 330rpx;
			}
			.shop_detail{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				opacity: 1;
				margin-top: 12rpx;
				padding: 0 14rpx;
				overflow: hidden;  
				text-overflow: ellipsis;  
				display: -webkit-box;  
				-webkit-line-clamp: 2;  
				-webkit-box-orient: vertical;
			}
			.shop_jifen{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #008573;
				opacity: 1;
				margin-top: 18rpx;
				padding: 0 14rpx;
			}
		}
	}
</style>
